<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>我的日记_陈恢严个人博客</title>
    <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
    <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/asset/images/favicon.ico" type="image/x-icon">
    <link href="/asset/css/base.css" rel="stylesheet">
    <link href="/asset/layui/css/layui.css" rel="stylesheet">
    <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
    <link href="/asset/css/loading.css" rel="stylesheet">
    <script type="text/javascript" src="/asset/js/comm.js"></script>
    <script type="text/javascript" src="/asset/layui/layui.js"></script>
    <script type="text/javascript" src="/asset/js/vue.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/asset/js/modernizr.js"></script>
    <![endif]-->
    <style>
        nav ul li a[href='/myDiary']{color: #f7ffb4; /*background: #176c86;*/
            background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
            background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
            background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
            background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
            background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
            background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        }
    </style>
</head>
<body>
<div class="box-bg">
    <div class="stars"></div>  <!--背景层，不要删除，不然没有作用-->
</div>
    <div id="myDiaryVue">
        <header>
            <div class="profile">
                <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
                <div class="guanzhu fl">
                    <ul>
                        <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
                        <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
                        <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
                        <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
                    </ul>
                </div>

                <!-- 加载提示start -->
                <div class="loading-div" v-if="!isLoad_1">
                    <div class="loader">
                        <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
                    </div>
                </div>
                <!-- 加载提示end -->

                <!-- 标题 -->
                <div class="username" v-html="logoTitle.content"></div>
            </div>

            <!-- 菜单start -->
            <nav>
                <ul id="starlist">
                    <li v-for="(item, index) in sysMenuList" :key="item.id">
                        <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
                        <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.location.href  = '/blogSpace';" v-text="item.name"></a>
                    </li>
                </ul>
            </nav>
            <!-- 菜单end -->
        </header>
        <article>
            <main class="r_box">
                <div class="timebox">

                    <div class="layui-tab layui-tab-brief" lay-filter="myDiary-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">个人日记</li>
                            <li>隐私日记</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <ul id="list">
                                    <li v-for="(item, index) in g_diaryList" :key="item.id">
                                        <span v-text="item.sendTimeValue"></span>
                                        <i><a v-bind:href="'/myDiary/diaryInfo?diaryId=' + item.id" v-text="item.title"></a></i>
                                    </li>
                                </ul>
                            </div>
                            <div class="layui-tab-item">
                                <ul id="list_2">
                                    <li v-for="(item, index) in y_diaryList" :key="item.id">
                                        <span v-text="item.sendTimeValue"></span>
                                        <i><a v-bind:href="'/myDiary/diaryInfo?diaryId=' + item.id" v-text="item.title"></a></i>
                                    </li>
                                </ul>
                                <div class="layui-form-item" v-show="!validFlag">
                                    <label class="layui-form-label">密码验证</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="diaryPassword" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                    <button type="button" v-on:click="validDiaryPassword" class="layui-btn">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 加载提示start -->
                <div class="loading-div" v-if="!isLoad_2 || !isLoad_3">
                    <div class="loader">
                        <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
                    </div>
                </div>
                <!-- 加载提示end -->

                <!-- 分页1 -->
                <div v-show="!pageFlag" id="pageContent_1" class="pagelist pagebg"></div>

                <!-- 分页2 -->
                <div v-show="pageFlag" id="pageContent_2" class="pagelist pagebg"></div>

            </main>
            <aside class="l_box">
                <div class="wdxc">
                    <h2>我的相册</h2>
                    <ul>
                        <li v-for="(item, index) in boPhotoAlbumList" :key="item.id">
                            <a v-bind:href="'/myAlbum/photo?albumId=' + item.id" v-if="isLoad_1" v-bind:title="item.name">
                                <img v-bind:src="'/photo_album_img/' + item.img">
                            </a>
                            <a href="javascript:void(0)" v-if="!isLoad_1">
                                <img src="/asset/images/yuantu.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="search">
                    <form action="" id="searchform" method="post" name="searchform">
                        <input class="input_text" v-model="searchFrom.title" style="color: rgb(153, 153, 153);" type="text" placeholder="请输入关键字词">
                        <input class="input_submit" v-on:click="clickSearchBtn" type="button" value="搜索">
                    </form>
                </div>
                <div class="fenlei">
                    <h2>标签云</h2>
                    <ul>
                        <li v-for="(item, index) in boTagList" :key="item.id">
                            <a href="javascript:void(0)" v-on:click="clickTagBtn(item.id)" v-text="item.name + '(' + item.articleNum + ')'" v-bind:style="'background-color:' + item.color"></a>
                        </li>
                    </ul>
                </div>
                <div class="tuijian">
                    <h2>站长推荐</h2>
                    <ul>
                        <li v-for="(item, index) in boArticleTopList" :key="item.id">
                            <a v-bind:href="'/myArticle/articleInfo?articleId=' + item.id" v-bind:title="item.title" v-text="item.title"></a>
                        </li>
                    </ul>
                </div>
                <div class="tuijian">
                    <h2>点击排行</h2>
                    <ul>
                        <li v-for="(item, index) in articleClickList" :key="item.id">
                            <a v-bind:href="'/myArticle/articleInfo?articleId=' + item.id" v-bind:title="item.title" v-text="item.title"></a>
                        </li>
                    </ul>
                </div>
                <div class="links">
                    <h2>友情链接</h2>
                    <ul>
                        <li v-html="friendshipUrl.content"></li>
                    </ul>
                </div>
            </aside>
        </article>
        <div class="blank"></div>
        <footer>
            <p v-html="indexFooter.content"></p>
        </footer>
        <a href="#" class="cd-top">Top</a>
    </div>
</body>
<script type="text/javascript">

    //初始化layui模块
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
        element.on('tab(myDiary-tab)', function(data){
            if(data.index == 0){
                myDiaryVue.pageFlag = false;
            }else if(data.index == 1){
                myDiaryVue.pageFlag = true;
            }
        });
    });

    var myDiaryVue = new Vue({
        el: '#myDiaryVue',
        data: function () {
            return {
                serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
                isLoad_1: false, //请求1完成标记
                isLoad_2: false, //请求2完成标记
                isLoad_3: true, //请求3完成标记
                pageFlag: false, //分页是否显示标记，false显示分页1，true显示标记2
                validFlag: false, //隐私密码验证标记（仅用于是否显示密码输入框）
                sysMenuList: [], //导航
                logoTitle: [], //LOGO标题
                indexFooter: [], //页脚
                friendshipUrl: 10, //友情连接
                boPhotoAlbumList: 6, //我的相册
                boTagList: 10, //文章标签
                boArticleTopList: 10, //站长推荐文章
                articleClickList: 10, //点击排行
                g_diaryList: 15, //个人日记
                y_diaryList: 0, //隐私日记
                g_count: 0, //个人日记总数
                g_curr: 1, //个人日记页数
                g_limit: 35, //个人日记每页条数
                y_count: 0, //隐私日记总数
                y_curr: 1, //隐私日记页数
                y_limit: 35, //隐私日记每页条数
                searchFrom: {
                    title: '',
                    tagId: ''
                }
            }
        },
        created: function () {
            const me = this;
            me.$nextTick(function () {
                me.getMyArticleData();
                me.getGDiaryList(me.g_curr, me.g_limit);
                me.getYDiaryList(me.y_curr, me.y_limit);
            });
        },
        methods: {
            //初始化基本信息
            getMyArticleData: function(){
                const me = this;
                $.ajax({
                    type: 'POST',
                    url: '/myArticle/getMyArticleData',
                    data: {},
                    dataType: 'JSON',
                    success: function(data){
                        if(data.state == "200"){
                            me.sysMenuList = data.sysMenuList;
                            me.logoTitle = data.logoTitle;
                            me.indexAboutMe = data.indexAboutMe;
                            me.indexFooter = data.indexFooter;
                            me.friendshipUrl = data.friendshipUrl;
                            me.boPhotoAlbumList = data.boPhotoAlbumList;
                            me.boTagList = data.boTagList;
                            me.boArticleTopList = data.boArticleTopList;
                            me.articleClickList = data.articleClickList;
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(data.message, {icon:2});
                            });
                        }
                        me.isLoad_1 = true;
                    },
                    error: function(error){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(error, {icon:2});
                        });
                    }
                })
            },

            //初始化日记信息
            getGDiaryList: function(curr, limit){
                const me = this;
                me.isLoad_2 = false;
                $.ajax({
                    type: 'POST',
                    url: '/myDiary/getGDiaryList',
                    data: {
                        page: curr,
                        limit: limit,
                        type: 0, //类型为个人日记
                        title: me.searchFrom.title,
                        tagId: me.searchFrom.tagId
                    },
                    dataType: 'JSON',
                    success: function(data){
                        if(data.state == "200"){
                            me.g_diaryList = data.diaryList;
                            me.g_count = data.count;

                            me.initPage_1(); //初始化分页

                            $('main').css('min-height', $('aside').css('height')); //文章区域最小高度等则边栏的高度
                            me.isLoad_2 = true;
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(data.message, {icon:2});
                            });
                        }
                    },
                    error: function(error){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(error, {icon:2});
                        });
                    }
                })
            },

            //初始化隐私日记信息
            getYDiaryList: function(curr, limit){
                const me = this;
                me.isLoad_3 = false;
                $.ajax({
                    type: 'POST',
                    url: '/myDiary/getYDiaryList',
                    data: {
                        page: curr,
                        limit: limit,
                        type: 1, //类型为隐私日记
                        title: me.searchFrom.title,
                        tagId: me.searchFrom.tagId
                    },
                    dataType: 'JSON',
                    success: function(data){
                        if(data.state == "200"){
                            me.y_diaryList = data.diaryList;
                            me.y_count = data.count;
                            me.validFlag = true;

                            me.initPage_2(); //初始化分页

                            $('main').css('min-height', $('aside').css('height')); //文章区域最小高度等则边栏的高度
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(data.message, {icon:2});
                            });
                        }
                        me.isLoad_3 = true;
                    },
                    error: function(error){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(error, {icon:2});
                        });
                    }
                })
            },

            //验证隐私日记密码
            validDiaryPassword: function(){
                const me = this;
                var layer = layui.layer;
                var diaryPassword = $("#diaryPassword").val();
                if(diaryPassword == '' || diaryPassword == null || diaryPassword == undefined){
                    layer.msg('请输入密码', {icon:2});
                    return;
                }
                var loadIndex = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '/myDiary/validDiaryPassword',
                    data: {
                        diaryPassword: diaryPassword
                    },
                    dataType: 'JSON',
                    success: function(data){
                        if(data.state == "200"){
                            me.validFlag = true;
                            me.getYDiaryList(me.y_curr, me.y_limit);
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.close(loadIndex); //关闭加载提示
                                layer.msg(data.message, {icon:1});
                            });
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.close(loadIndex); //关闭加载提示
                                layer.msg(data.message, {icon:2});
                            });
                        }
                    },
                    error: function(error){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.close(loadIndex); //关闭加载提示
                            layer.msg(error, {icon:2});
                        });
                    }
                })
            },

            //点击搜索按钮
            clickSearchBtn: function(){
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg("开发中……");
                });
                // const me = this;
                // me.curr = 1; //初始化页数
                // me.searchFrom.tagId = '';
                // me.getDiaryList(me.curr, me.limit);
            },

            //点击标签
            clickTagBtn: function(tagId){
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg("开发中……");
                });
                // const me = this;
                // me.curr = 1; //初始化页数
                // me.searchFrom.title = '';
                // me.searchFrom.tagId = tagId;
                // me.getDiaryList(me.curr, me.limit);
            },

            //分页1
            initPage_1: function(){
                const me = this;
                layui.use('laypage', function(){
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'pageContent_1' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: me.g_count //数据总数，从服务端得到
                        ,limit: me.g_limit //每页条数
                        ,curr: me.g_curr //页数
                        // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
                        ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
                        ,jump: function(obj, first){ //obj包含了当前分页的所有参数
                            //首次不执行
                            if(!first){
                                me.g_curr = obj.curr;
                                me.getGDiaryList(obj.curr, obj.limit);
                            }
                        }
                    });
                });
            },

            //分页2
            initPage_2: function(){
                const me = this;
                layui.use('laypage', function(){
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'pageContent_2' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: me.y_count //数据总数，从服务端得到
                        ,limit: me.y_limit //每页条数
                        ,curr: me.y_curr //页数
                        // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
                        ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
                        ,jump: function(obj, first){ //obj包含了当前分页的所有参数
                            //首次不执行
                            if(!first){
                                me.y_curr = obj.curr;
                                me.getYDiaryList(obj.curr, obj.limit);
                            }
                        }
                    });
                });
            }
        }
    });
</script>
</html>
